<!-- 
    动态审核
    毛毅卓
 -->
<template>
    <div>
        <div style="margin:10px 0;">
                    <el-input v-model="sousuofrom.nickName" style="width:200px;" placeholder="请输入昵称" suffix-icon="el-icon-message" class="ml-5"></el-input>
                    <el-button @click="load()" class="ml-5" type="primary">搜索</el-button>
                    <el-button @click="reset()" style="margin-left: 5px;" type="warning">重置</el-button>
                    
        </div>
            <!-- 表格数据 -->
                <el-table :data="tableData" border stripe header-cell-class-name="headerBg" @selection-change="handleSelectionChange"> 
                    <el-table-column type="selection" width="55" />
                    <el-table-column prop="id" label="ID" width="50" />
                    <el-table-column prop="userName" label="账号" width="120" />
                    <el-table-column prop="nickName" label="用户名" width="120" />
                    <el-table-column prop="imageId" label="头像" width="140" >
                        <template slot-scope="scope">
                            <el-image style="width:100px;height:100px;" :src="scope.row.avatarUrl"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="dynamicContent" label="动态" width="200" />
                    <el-table-column prop="commentTime" label="创建时间" width="160" />
                    <el-table-column label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button type="warning" @click="handleEdit(scope.row.id)">通过<i class="el-icon-edit"></i></el-button>
                            <el-popconfirm
                                class="ml-5"
                                confirm-button-text="确定"
                                cancle-button-text="我再想想"
                                icon="el-icon-info"
                                icon-color="red"
                                title="您确定驳回吗"
                                @confirm="del(scope.row.id)"
                            >
                                <el-button type="danger" slot="reference">驳回<i class="el-icon-delete"></i></el-button>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            <!-- 分页 -->
                <div style="padding:10px 0;">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageNum"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                    </el-pagination>
                </div>
    </div>
</template>
    
<script>
// import  request  from '@/utils/request.js'

export default {
    data() {
        return {
            //表格数据
            tableData:[],
            // multipleSelection:[],
            pageNum:1,
            pageSize:5,
            total:0,
            avatarUrl:'',
            //模糊查搜索框数值
            sousuofrom:{
                nickName:'',
            },
            rules:{
                nickname: [
                    { required: true, message: '请输入昵称', trigger: 'blur' },
                    { min: 1, max: 6, message: '长度在 1 到 6个字符', trigger: 'blur' }
                ],
            }
        }//return
    },
    created(){
        this.load()
    },
    //方法集合
    methods:{
        //关闭修改&添加弹窗
        savadown(){
            //重置所有输入框
            this.$refs.userform.resetFields();
            //关闭弹窗
            this.$message.warning("已取消")
            //刷新表格数据
            this.load()
        },
        //全查+多字段模糊查询
        load(){
            //请求分页查询数据
            this.$axios.get("DynamicAudit/DynamicAuditList",{
                params:{
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    nickName: this.sousuofrom.nickName,
                }
            }).then(res =>{
                console.log(res);
                this.tableData = res.data.data.content
                this.total = res.data.data.totalSize
            })
        },
        handleEdit(id){
            this.$axios.delete("DynamicAudit/UpdateDynamicAuditList/" + id).then(res =>{
                if(res.data.code === 200 ){
                    this.$message.success("审批成功")
                    //重新渲染刷新表格
                    this.load()
                }else{
                    this.$message.error("审批失败")
                }
            })
        },
        del(id){
            this.$axios.delete("DynamicAudit/UpdateDynamicAuditListTwo/" + id).then(res =>{
                if(res.data.code === 200 ){
                    this.$message.success("驳回成功")
                    //重新渲染刷新表格
                    this.load()
                }else{
                    this.$message.error("驳回失败")
                }
            })
        },
        reset(){
            this.sousuofrom.nickName = ""
            this.load()
        },
        handleSizeChange (pageSize) { // 分页
            this.pageSize = pageSize
            this.load()
            console.log(`每页 ${pageSize} 条`)
        },
        handleCurrentChange (pageNum) { // 分页
            this.pageNum = pageNum
            this.load()
            console.log(`当前页: ${pageNum}`)
        },
    }
}
</script>

<style scoped>
html,body,div{
    margin: 0;
    padding: 0;
    text-align: left;
}
html.body{
    height: 100%;
}
/* *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
} */
.ml-5{
    margin-left: 5px;

}
.mr-5{
    margin-right: 5px;
}
.pd-10{
    padding: 10px 0;
}
</style>